//grid 表格类的使用
(function() {
	Ext.QuickTips.init();
	//创建表格时用到的表格面板
	var grid = Ext.create("Ext.grid.Panel", {
		title: 'Grid Demo', //表格的标题
		frame: true,  //面板渲染
		//forceFit: true,  //自动适应列宽度
		width: 600,
		height: 200,
		//列模式
		columns: [
			{text: 'name', dataIndex: 'name', width: 200},
			{text: 'age', dataIndex: 'age', width: 100},
			{text: 'email', dataIndex: 'email', width: 300,
				//设置双击就可以编辑
				field: {xtype: 'textfield', allowBlank: false}
			}
		],
		//工具栏
		tbar: [
			{xtype:'button', text: '添加'},
			{xtype:'button', text: '删除',
				//添加按钮的动作--事件
				handler: function(bo) {
					//alert("单击删除");
					//找到父级面板grid方式1
					//var grid = bo.findParentByType("gridpanel");
					//找到父级面板grid方式2
					var grid = bo.ownerCt.ownerCt;
					//grid.getSelecttionMode得到面板的选择模式，单选-多选
					//getSelection 取得面板上选择数据的条数
					var delData = grid.getSelecttionMode().getSelection();
					if (0 == delData) {
						Ext.Msg.alert("提示", "您最少要选择一条要删除的数据！");
					} else {
						//先取得要删除数据的id，在把id传到后台，在后台执行删除操作
						//重回到前端页面刷新显示
						// 1. step
						var st = grid.getStore();
						var ids = [];
						Ext.Array.each(delData,function() {
							ids.push(record.get('name'));
						});
						//2 step
						Ext.Array.request({
							url: '',
							params: {ids: ids.join(",")},  //把要删除的数据标志用逗号分隔传到后台
							method: 'post',
							timeout: 2000,
							success: function(response, opts) {
								Ext.Array.each(delData,function(record) {
									st.remove(record);
								});
							}
						});
					}
			}},
			{xtype:'button', text: '修改'},
			{xtype:'button', text: '查看'}
		],
		dockedItems : [
			{
				xtype: 'pagingtoolbar',  //分页工具条 
				store: Ext.data.StoreManager.lookup("user_id"),
				dock: 'bottom',  //定位
				displayInfo: true
			}	
		],
		plugins: [
			Ext.create('Ext.grid.plugin.CellEditing', {
            	clicksToEdit: 2  //双击 显示栏变成可编辑
       		})
		],
		selType: 'checkboxmodel',  //设定选择模式
		multiSelect: true,  //设置多选
		renderTo: 'grid_demo', //HTML标签id
		store: Ext.data.StoreManager.lookup("user_id")  //model类的store id
	});
})();